{% extends "base.html" %}
{% load static %}

{% block headjs %}
<style>
        .zoomable-image {
            max-width: 300px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .zoomable-image.zoomed {
            transform: scale(2);
            max-width: none;
        }
    </style>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                +

{% endblock %}

{% block content %}
{% include 'banji/banji_top_set.html' %}
<div class="row">

  <div class="col-lg">
    <div class="card">

      <div class="card-body">
        <h5 class="card-title">{{ object.name }}
{#            <a  class="btn px-5 btn-danger"  href="{% url 'Banji_xueyuan_Add' object.id %}"><i class="fa fa-address-card mr-1"></i>新学员进班</a> #}
        </h5>
        <div class="card-body">
          <div class="card-text row">
            <div class="col-6">
              <p>开班时间：{{ object.open_time }}</p>
              <p>关班时间：{{ object.end_time }}</p>
            </div>
            <div class="col-6">
              <div class="col"> {% include 'messages.html' %} </div>
            </div>
          </div>
        </div>
        <hr>
        <div class="col">
          <ul class="nav nav-pills nav-fill nav-tabs nav-tabs-custom nav-justified" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <li class="nav-item"> <a class="nav-link active show border-bottom" id="v-pills-xueyuan-tab" data-toggle="pill" href="#v-pills-xueyuan" role="tab" aria-controls="v-pills-xueyuan" aria-selected="true"> 班级学员 </a> </li>
            <li class="nav-item"> <a class="nav-link border-bottom" id="v-pills-shuoming-tab" data-toggle="pill" href="#v-pills-shuoming" role="tab" aria-controls="v-pills-shuoming" aria-selected="false"> 班级说明 </a> </li>
            <li class="nav-item"> <a class="nav-link border-bottom" id="v-pills-ziliao-tab" data-toggle="pill" href="#v-pills-ziliao" role="tab" aria-controls="v-pills-ziliao" aria-selected="false"> 文档资料 </a> </li>
          </ul>
        </div>
      </div>


      <div class="card-body">
        <div class="col">
          <div class="tab-content" id="v-pills-tabContent">
            <div class="tab-pane fade active show" id="v-pills-xueyuan" role="tabpanel"
                                     aria-labelledby="v-pills-xueyuan-tab">

            {% include 'banji/Detail_xueli_tablist.html' %}


            </div>
            <div class="tab-pane fade" id="v-pills-shuoming" role="tabpanel" aria-labelledby="v-pills-shuoming-tab">
              <div class="card">
                <div class="card-body" id="neirong-img-txt">
                <h5 class="card-title p-2">班级说明：</h5>
                    {{ tzzy_banji_Detail.shouming|safe}}
                    <br>
                     <h5 class="card-title p-2">班级产品列表：</h5>
                     {% for chanpin in object.banji_chanpin.all %}
                              <p class="border-bottom p-1">
                              {{ chanpin }}
                              <br>
                                  <span class="text-right">
                                       {{ chanpin.beizhu|safe }}
                                  </span>

                              </p>
{#                              <a href="{% url 'Chanpin_detail' chanpin.id %}" class="card-link">查看资料</a>#}
                             {% endfor %}
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="v-pills-ziliao" role="tabpanel" aria-labelledby="v-pills-ziliao-tab">
              <div class="card">
                <div class="card-body" id="neirong-img-txt"> {{ tzzy_banji_Detail.shouming|safe}} </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

{% endblock %}
{% block footerjs %}
<script>
   document.addEventListener('DOMContentLoaded', function() {
            // 选择#neirong-img-txt内的所有img元素
            var images = document.querySelectorAll('#neirong-img-txt img');
            // 给每个img元素添加新的class
            images.forEach(function(image) {
                image.classList.add('new-class');
            });
        });
   //点击图片放大
        document.addEventListener('DOMContentLoaded', function() {
            var images = document.querySelectorAll('#neirong-img-txt img');
            images.forEach(function(image) {
                image.addEventListener('click', function() {
                    // 切换类名来切换放大和正常状态
                    if (image.classList.contains('zoomed')) {
                        image.classList.remove('zoomed');
                    } else {
                        image.classList.add('zoomed');
                    }
                });
            });
        });
    </script>
{% endblock %}